<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>hello_jquery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .bg {
                background: #f00;
                color: #fff;
            }
        </style>
        
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
               var hello = document.getElementById("hello");
               //js的对象，不能使用jquery的方法
               //hello.css("color","#f00");
               //使用$()封装成jquery的节点
               $(hello).css("color","#f00");
               
               //jquery节点来转换成dom节点,只要取出数组中的值，就能用js的方法
               //当转换为js节点之后，就无法使用jquery 的方法了，如果要使用jquery的方法再$包装
               ($("li.abc")[0]).innerHTML = "abccba";
               
                var lis = $("#hello ul li");
                for(var i=0; i<lis.length;i++) {
                    //目前的li是js 的节点
                    var li = lis[i];
                    //li.innerHTML = "[" + (i+1) +"]"+li.innerHTML;
                    //xx.html()读取内容，xx.html("abc")进行替换
                    $(li).html((i+1)+"."+$(li).html());//不要参数就是没内容
                    }
                });
                
                
        </script>
    </head>
    <body>
        <div id="hello">
            <ul>
                <li>aaaaaaaaaaa</li>
                <li>bbbbbbbbbbb</li>
                <li class="abc">ccccccccccc</li>
                <li>ddddddddddd</li>
                <li>eeeeeeeeeee</li>
            </ul>
        </div>
    </body>
</html>
